import React, { useState, useEffect } from 'react';
import { exportWord } from 'mhtml-to-word'
import axios from 'axios'
import { Popconfirm, message, Breadcrumb, Input, Row, Col, Button, Divider, Table, Modal, Form, Radio } from 'antd';


import { SearchOutlined, DownloadOutlined, PrinterOutlined, EyeOutlined } from '@ant-design/icons';

const KeMuBianMaBiao = () => {
    //table数据
    const [dataSource, setDataSource] = useState([])
    //模态框数据
    const [initialValuesData, setInitialValuesData] = useState({})
    //总条数
    const [total, setTotal] = useState(0)

    //table表头
    const columns = [
        {
            title: '科目编码',
            dataIndex: 'keMuMa',
            key: 'id',
            align: "center",
            width: 400,


        },
        {
            title: '科目名称',
            dataIndex: 'keMuMingCheng',
            key: 'keMuMingCheng',
            align: "center",
            width: 500
        },
        {
            title: "操作",
            dataIndex: 'operation',
            key: 'operation',
            ellipsis: true,
            align: 'center',
            width: "300px",
            render: (text,row) => {
                return (
                    <>
                        <Row justify="center">
                            <Col span={8}><Button type="primary" onClick={()=>{showModal(row)}} icon={<EyeOutlined />}>查看</Button></Col>
                        </Row>
                    </>
                )
            }
        }
    ];

    //table分页
    const paginationProps = {
        pageSize: 10,
        onChange: (page) => { console.log(page); getData(page) },
        total: { total },
        showQuickJumper: true,
        showTotal: (total, range) => `共${total}条数据`,
        position: ["bottomCenter"]
    }


    //模态框设置
    const [isModalVisible, setIsModalVisible] = useState(false);


    const [form] = Form.useForm()
    const showModal = (row) => {
       console.log(row)
       row.keShiMingCheng=row.keShiBianMa.keShiMingCheng
       row.shouFeiLeiXingMingCheng=row.shouFeiLeiXing.shouFeiLeiXingMingCheng
         setIsModalVisible(true);
         form.setFieldsValue(row)
        

    };

    const handleOk = async () => {
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };






    //打印按钮设置
    const text = '是否打印当前项？';
    function confirm() {
        // message.info('Clicked on Yes.');
        sessionStorage.getItem("info")
    }

    //获取查询form数据
    const onFinish = (values) => {
        console.log('Success:', values);
        axios("/keMuBianMa/chaXunFenYe", {
            method: "get",
            params: { page: 1,...values }
        })
            .then(res => {
                console.log(res)
                setDataSource(res.data.data)
                setTotal(res.data.data.length)
            })
            .catch(err => {
                console.log(err)
            })
    };


    //获取数据
    const getData = (nowPage) => {
        axios("/keMuBianMa/chaXunFenYe", {
            method: "get",
            params: { page: nowPage }
        })
            .then(res => {
                console.log(res)
                setDataSource(res.data.data)
                setTotal(res.data.data.length)
            })
            .catch(err => {
                // console.log(err)
            })
    }


    function exportTable(){
        exportWord({
            filename: "科目编码表",
            selector: ".export",
            style:''
        })
    }

    useEffect(() => {
        getData(1)
    }, [Form])


    return (
        <div>
            <Modal title="查看科目编码表详细信息" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} okText="确认" cancelText="取消">
                <Form
                    layout="vertical"
                    onFinish={onFinish}
                    name="userForm"
                    form={form}
                >

                    <Form.Item label="收费类别码:" name="shouFeiLeiXingDaiHaoId" >
                        <Input placeholder="无" disabled />
                    </Form.Item>
                    <Form.Item label="科室码:" name="keShiBianHaoId">
                        <Input placeholder="无" disabled />
                    </Form.Item>
                    <Form.Item label="科室名称:" name="keShiMingCheng">
                        <Input placeholder="无" disabled />
                    </Form.Item>
                    <Form.Item label="收费类型:" name="shouFeiLeiXingMingCheng">
                        <Input placeholder="无" disabled />
                    </Form.Item>
                </Form>
            </Modal>
            <Breadcrumb style={{ marginBottom: 24 }}>
                <Breadcrumb.Item>在院计费</Breadcrumb.Item>
                <Breadcrumb.Item>科目编码表</Breadcrumb.Item>
            </Breadcrumb>
            <div className="site-layout-background" style={{ padding: 24, margin: 12, minHeight: 70 }}>
                <Row justify="space-between" align="middle">
                    <Col span={24}>
                        <Form
                            layout="inline"
                            onFinish={onFinish}
                            name="chaXunForm"
                        >

                            <Form.Item label="科目名称：" name="keMuMingCheng" >
                                <Input placeholder="请输入科目名称" />
                            </Form.Item>
                            <Form.Item label="科目编码：" name="keMuMa">
                                <Input placeholder="请输入科目编码" />
                            </Form.Item>
                            <Form.Item >
                                <Button type="primary" icon={<SearchOutlined />} htmlType="submit">查询</Button>
                            </Form.Item>
                        </Form>
                    </Col>
                </Row>
                <Row style={{ marginTop: 24 }}>
                    <Col span={12}>
                        <Button type="primary" shape="round" icon={<DownloadOutlined />} onClick={exportTable}>
                            导出选中数据
                        </Button>
                    </Col>
                </Row>
            </div>
            <div className="site-layout-background" style={{ padding: 24, margin: 12, minHeight: 300 }}>
                <Divider orientation="left" style={{ fontWeight: 600, fontSize: 20 }}>科目编码表</Divider>
                <div className="export">
                <Table
                    dataSource={dataSource}
                    columns={columns}
                    pagination={paginationProps}
                    // onRow={record => {
                    //     return {
                    //         onClick: event => {
                    //             // console.log(record); 
                    //             sessionStorage.setItem("info", JSON.stringify(record))
                    //         }, // 点击行
                    //     };
                    // }}
                    childrenColumnName
                />
                </div>
            </div>
        </div>
    );
}

export default KeMuBianMaBiao;
